<template>
  <div class="inter-progress">
    <div class="inter-progress-body"></div> 
    <div class="inter-progress-indic" :style="getStyle"></div>
  </div> 
</template>
<script setup>
import { ref , defineProps, computed } from 'vue'
const props = defineProps({
  leftNum: {
    type: [String, Number],
    default: '100'
  }
})

const getStyle = computed(() => {
  let param  = {
    right: 0 
  }
  return props?.leftNum == 100 ? param : { left: props?.leftNum + '%' }
})
</script>
<style lang="scss" scoped>
  .inter-progress{
    height: 20px;
    display: flex;
    align-items: center;
    position: relative;
    &-body{
      height: 8px;
      background: #ecf0f1;
      border-radius: 8px;
      width: 100%;
    }
    &-indic{
      width: 16px;
      height: 16px;
      background: #3498db;
      border-radius: 16px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
</style>